<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评论列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 
        1.通过对页面的分析，我们把页面分成了两个组件（分析页面，拆分组件）
            1.1 发布组件
            1.2 列表展示的组件
        2. 静态页面还原
        3. 拆组件的数据
            3.1 有哪些数据是需要放到data上的
            3.1 有哪些数据是需要从父组件传递进来的
            3.2 有哪些插槽是需要从父组件传递进来的
        4. 组件上的事件
            4.1 需要一个提交的事件
            4.2 提交成功之后需要通知父组件更新数据
     -->

    <!-- 发布组件 -->
    <template id="publishCommentTemp">
        <div>
            <form role="form">
                <legend>发布评论</legend>

                <div class="form-group">
                    <label for="name">名字</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入名字" v-model="name">
                </div>

                <div class="form-group">
                    <label for="content">内容</label>
                    <textarea type="text" class="form-control" id="content" placeholder="请输入内容"
                        v-model="content"></textarea>
                </div>

                <button type="button" class="btn btn-primary" @click="submit">提交</button>
            </form>
        </div>
    </template>
    <script>
        const publishComment = {
            template: '#publishCommentTemp',
            data() {
                return {
                    name: '',
                    content: ''
                }
            },
            methods: {
                submit() {
                    // 执行提交操作

                    let commentList = JSON.parse(localStorage.getItem('commentList') || '[]')
                    commentList.push({name:this.name,content:this.content})
                    localStorage.setItem('commentList',JSON.stringify(commentList))

                    this.$emit('after-submit')
                }
            },
        }
        Vue.component('publishComment', publishComment)
    </script>

    <!-- 
        列表组件
        1. 接受一个列表的数据
     -->
    <template id="commentListTemp">
        <div>
            <ul class="list-group">
                <li v-for="item in list" class="list-group-item">{{item.content}}
                    <span class="badge">{{item.name}}</span>
                </li>
            </ul>
        </div>
    </template>
    <script>
        const commentList = {
            template: '#commentListTemp',
            props: {
                list: {
                    type: Array,
                    default () {
                        return []
                    }
                }
            }
        }
        Vue.component('commentList', commentList)
    </script>


    <div id='app'>
        <div class="container">
            <publish-comment @after-submit="afterSubmit"></publish-comment>
            <comment-list style="margin-top:20px" :list="list"></comment-list>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                list: JSON.parse(localStorage.getItem('commentList') || '[]')
            },
            methods: {
                afterSubmit() {
                    // 提交之后
                    console.log("提交之后");
                    this.list = JSON.parse(localStorage.getItem('commentList') || '[]')
                }
            },
            created() {
                // || 或运算符，返回是第一个为真的值
                // 1. 如果整体表达式为真的话，返回的第一个为真的值
                // 2. 如果整体表达式为假的话，返回最后一个为假的值
                // && 与运算符，
                // 1. 如果整体表达式为真的话，返回的最后一个为真的值
                // 2. 如果整体表达式为假的话，返回第一个为假的值

                let a = false
                let b = "啦啦啦"
                let c = "dididdi"
                let d = 0
                let e = null
                console.log(a || d || e);
                // this.list = JSON.parse(localStorage.getItem('commentList') || '[]')
            },
        })
    </script>
</body>

</html>